<template>
	<view class="content">
		<map
			v-if="latitude || longitude"
			id="map"
			class="map"
			:show-location="false"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			:polyline="polyline"
			scale="16"
			@markertap="markertap"
		></map>
		<iframe
			id="geoPage"
			width="0"
			height="0"
			frameborder="0"
			style="display:none;"
			scrolling="no"
			src="https://apis.map.qq.com/tools/geolocation?key=2DNBZ-GMJCU-45RVX-2UI7X-I6KFF-7UBCJ&referer=myapp"
		></iframe>
		<web-view style="display: none;" src="/static/html/map.html"></web-view>
		<view class="item signin">
			<image class="icon" style="margin-right: 28rpx;" src="../../static/images/icon_clock_20.png" mode=""></image>
			<text style="font-size: 28rpx;">
				已打卡：
				<text v-if="current < 9">
					<text class="distance">{{ current }}</text>
					/9
				</text>
				<text v-else>已完成</text>
			</text>
		</view>
		<view class="footBtn">
			<view v-if="current < 9" style="display: flex;justify-content: space-between;margin: 32rpx 0;width: 90%;">
				<view class="item">
					<image class="icon" src="../../static/images/icon_distance_20.png" mode="widthFix"></image>
					<text style="font-size: 28rpx;">
						距离打卡地点({{current==0?'起点':current}})：
						<text class="distance">{{ distance(nexts[0], nexts[1]) }}</text>
						{{ !status ? '公里' : '米' }}
					</text>
				</view>
				<view class="item" @click="origin"><image class="icon" src="../../static/images/icon_position_20.png" mode="widthFix"></image></view>
			</view>
			<image v-if="distance(nexts[0],nexts[1]) <= 50 && status && current < 9" src="../../static/images/clockIn.png" mode="widthFix" @click="open"></image>
			<image v-else src="../../static/images/chockIn2.png" mode="widthFix" @click="open"></image>
		</view>
		<uni-popup ref="popup">
			<view class="task">
				<view class="task-title">根据提示的打卡地点，找到相关地点建筑物，并上传合拍照一张，即算完成任务</view>
				<robby-image-upload :showUploadProgress="false" :value="imageData" :limit="1"></robby-image-upload>
				<text class="task-tips">(点击上传照片)</text>
				<view  class="task-submit" :class="imageData.length > 0 ? 'photo1' : 'photo2'" @click="confirm">提交照片</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="message"><uni-popup-message :type="text == '打卡成功' ? 'success' : 'error'" :message="text" :duration="2000"></uni-popup-message></uni-popup>
	</view>
</template>

<script>
// import vConsole from '../../static/vconsole.js';
var self, mapCtx;
import coordtransform from 'utils/index.js';
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import UniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
export default {
	components: { robbyImageUpload, uniPopupDialog, UniPopupMessage },
	data() {
    // 参数作用查看 uniapp map组件
		return {
			text: '',
			imageData: [],
			latitude: null,
			longitude: null,
			markers: [
				{
					id: 0,
					latitude: 22.173970005339591,
					longitude: 113.52419012484137,
					iconPath: '/static/images/start.png'
				},
				{
					id: 1,
					latitude: 22.174415095907367,
					longitude: 113.52494041146507,
					iconPath: '/static/images/1.png'
				},
				{
					id: 2,
					latitude: 22.173816739445392,
					longitude: 113.52568984561557,
					iconPath: '/static/images/2.png'
				},
				{
					id: 3,
					latitude: 22.173505001993146,
					longitude: 113.525340252775,
					iconPath: '/static/images/3.png'
				},
				{
					id: 4,
					latitude: 22.172547608267976,
					longitude: 113.52545730988999,
					iconPath: '/static/images/4.png'
				},
				{
					id: 5,
					latitude: 22.172264974969526,
					longitude: 113.52661910882802,
					iconPath: '/static/images/5.png'
				},
				{
					id: 6,
					latitude: 22.173197304394861,
					longitude: 113.52651108428556,
					iconPath: '/static/images/6.png'
				},
				{
					id: 7,
					latitude: 22.173516666372443,
					longitude: 113.52736797341103,
					iconPath: '/static/images/7.png'
				},
				{
					id: 8,
					name: 'asdasdas',
					latitude: 22.173658336425799,
					longitude: 113.52731900755218,
					iconPath: '/static/images/8.png'
				},
				{
					id: 99,
					latitude: 22.173970005339591,
					longitude: 113.52419012484137,
					iconPath: '/static/images/site.png'
				}
			],
			polyline: [
				{
					points: [
						{
							latitude: 22.173970005339591,
							longitude: 113.52419012484137
						},
						{
							latitude: 22.174415095907367,
							longitude: 113.52494041146507
						},
						{
							latitude: 22.173816739445392,
							longitude: 113.52568984561557
						},
						{
							latitude: 22.173505001993146,
							longitude: 113.525340252775
						},
						{
							latitude: 22.172547608267976,
							longitude: 113.52545730988999
						},
						{
							latitude: 22.172264974969526,
							longitude: 113.52661910882802
						},
						{
							latitude: 22.173197304394861,
							longitude: 113.52651108428556
						},
						{
							latitude: 22.173516666372443,
							longitude: 113.52736797341103
						},
						{
							latitude: 22.173658336425799,
							longitude: 113.52731900755218
						},
						{
							latitude: 22.173970005339591,
							longitude: 113.52419012484137
						}
					],
					color: '#0000AA',
					width: 2,
					dottedLine: true,

					borderWidth: 2, //线的边框宽度，还有很多参数，请看文档
					borderColor: '#0000AA'
				}
			],
			controls: [
				{
					id: 1,
					iconPath: '/static/images/site.png'
				}
			],
			current: 0,
			status: false
		};
	},
	computed: {
		nexts: function() {
			let a = this.markers.find(item => item.id == this.current);
			if (a){
				return [a.latitude, a.longitude];
			} else {
				return [0, 0];
			}
		}
	},
	onLoad() {
		self = this;
		// 获取当前map
		mapCtx = uni.createMapContext('map', self);
	},
	onReady() {
		// 接收位置信息
		this.getLoc();
	},
	methods: {
    // 提交照片
		confirm() {
			console.log('🤐,😱,🥺');
			if (this.imageData.length > 0) {
				this.current = this.current + 1;
				this.imageData = [];
				this.text = '打卡成功';
				this.$refs.popup.close();
				this.$refs.popup1.open();
				return;
			}
			this.text = '请先上传打卡图片';
			this.$refs.popup1.open();
		},
		close() {
			this.$refs.popup.close();
		},
    // 点击拍照打卡
		open() {
			if (this.distance(this.nexts[0], this.nexts[1]) <= 50 && this.status) {
				this.$refs.popup.open();
				return;
			}
			this.text = '距离50米内才能打卡';
			this.$refs.popup1.open();
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		},
		getLoc() {
			window.addEventListener(
				'message',
				e => {
					var loc = e.data;
					if (loc && loc.module) {
						this.latitude = loc.lat;
						this.longitude = loc.lng;
						this.toLocation(loc);
						this.res = loc;
						// console.log('location', loc);
						// console.log(e.data, 'eeeee');
					}
				},
				false
			);
		},
		//根据金纬度计算距离
		distance(lat1, lng1) {
			// console.log('计算地点经纬度：', lat1, lng1);
			// console.log(this.res);
			let lat2 = this.latitude;
			let lng2 = this.longitude;
			// let lat2 =22.173516666372443;
			// let lng2 = 113.52736797341103;
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137; // EARTH_RADIUS;
			s = Math.round(s * 10000) / 10000;

			if (isNaN(s)) {
				return 0 + 'm';
			}
			// console.log('距离：'+s)
			if (s < 1) {
				this.status = true;
				s = parseInt(s * 1000);
				// 米
				s = s;
			} else {
				this.status = false;
				// 公里
				s = parseInt(s);
			}

			return s;
		},
		markertap(e) {
			// console.log(e);
		},
		// 获取地理位置
		getLocationInfo() {
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					console.log(res, '当前位置');
					// 移动到当前位置
					self.latitude = res.latitude;
					self.longitude = res.longitude;
					self.toLocation(res);
					self.res = res;
					console.log(self.longitude);
				}
			});
		},
		origin() {
			console.log('回到原点');
			// 改变地图中心位置
			mapCtx.moveToLocation({latitude: this.latitude,longitude: this.longitude});
		},
		toLocation(obj) {
			// 改变地图中心位置
			// mapCtx.moveToLocation(obj)
			// 移动标记点并添加动画效果
			mapCtx.translateMarker({
				markerId: 99,
				duration: 1000,
				destination: {
					latitude: obj.lat || obj.latitude,
					longitude: obj.lng || obj.longitude
				},
				animationEnd() {
					// console.log('animation end');
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	flex: 1;
}

.map {
	flex: 1;
	width: 100vw;
	height: 100vh;
}
.item {
	background-color: #fff;
	padding: 28rpx;
	display: flex;
	align-items: center;
	border-radius: 20rpx;
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
}
.item:first-child {
	flex: 1;
	.icon {
		margin-right: 28rpx;
	}
}
.item:last-child {
	margin-left: 32rpx;
}
.signin {
	position: fixed;
	top: 128rpx;
	left: 32rpx;
}
.distance {
	color: #f6a000;
	font-size: 40rpx;
}
.task {
	background-image: url(../../static/images/backround.png);
	background-position: center;
	background-size: 100% 100%;
	width: 686rpx;
	height: 820rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.task-title {
		color: #fff;
		font-size: 28rpx;
		padding: 0 70rpx;
		padding-top: 120rpx;
		padding-bottom: 60rpx;
	}
	.task-box {
		border: 1rpx solid #9cffff;
		border-radius: 20rpx;
		margin: 0 184rpx;
		margin-top: 48rpx;
	}
	.task-tips {
		color: rgba(255, 255, 255, 0.85);
		font-size: 24rpx;
	}
	.task-submit {
		margin: 52rpx 96rpx;
		background-size: 100% 100%;
		background-position: center;
		height: 80rpx;
		width: 496rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 600;
	}
	.photo1 {
		color: #9f6d03;
		background-image: url(../../static/images/photo.png);
	}
	.photo2 {
		color: #fff;
		background-image: url(../../static/images/photos.png);
	}
}
.footBtn {
	position: fixed;
	bottom: 0;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20rpx 0;
	button {
		width: 60vw;
		border-radius: 50rpx;
		background: #4387ff;
		color: #fff;
	}

	image {
		width: 100vw;
	}
}
</style>
